<!--<template>-->
<!--  <HeaderComponent />-->
<!--  <div class="community-container">-->
<!--    <el-main class="main-content">-->
<!--      <h1>美食社区</h1>-->
<!--      <el-row>-->
<!--        <el-col :span="24">-->
<!--          <div class="post-button-container">-->
<!--            <el-button type="text"-->
<!--                       @click="showPostForm">发布新帖</el-button>-->
<!--          </div>-->
<!--        </el-col>-->
<!--        <el-col :span="8"-->
<!--                v-for="(post, index) in posts"-->
<!--                :key="index">-->
<!--          <el-card>-->
<!--            <el-image :src="post.image"-->
<!--                      fit="cover"-->
<!--                      alt="美食图片"></el-image>-->
<!--            <div class="card-content">-->
<!--              <h3>{{ post.title }}</h3>-->
<!--              <p>{{ post.description }}</p>-->
<!--              <el-button type="text"-->
<!--                         @click="viewPost(post)">查看详情</el-button>-->
<!--            </div>-->
<!--          </el-card>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--    </el-main>-->
<!--  </div>-->

<!--</template>-->

<!--<script>-->
<!--import { ElRow, ElCol, ElCard, ElButton, ElImage } from 'element-plus';-->
<!--import HeaderComponent from "@/components/HeaderComponent.vue";-->
<!--import { ref } from 'vue';-->

<!--export default {-->
<!--  name: 'CommunityComponent',-->
<!--  components: {-->
<!--    HeaderComponent,-->
<!--    ElRow,-->
<!--    ElCol,-->
<!--    ElCard,-->
<!--    ElButton,-->
<!--    ElImage,-->
<!--  },-->
<!--  data() {-->
<!--    return {-->
<!--      posts: [-->
<!--        {-->
<!--          id: 1,-->
<!--          image: require('@/assets/5.jpg'),-->
<!--          title: '美食推荐1',-->
<!--          description: '这是一道非常美味的菜肴，值得一试！'-->
<!--        },-->
<!--        {-->
<!--          id: 2,-->
<!--          image: require('@/assets/5.jpg'),-->
<!--          title: '美食推荐2',-->
<!--          description: '这是一道非常美味的菜肴，值得一试！'-->
<!--        },-->
<!--        {-->
<!--          id: 3,-->
<!--          image: require('@/assets/5.jpg'),-->
<!--          title: '美食推荐3',-->
<!--          description: '这是一道非常美味的菜肴，值得一试！'-->
<!--        },-->
<!--        {-->
<!--          id: 4,-->
<!--          image: require('@/assets/5.jpg'),-->
<!--          title: '美食推荐4',-->
<!--          description: '这是一道非常美味的菜肴，值得一试！'-->
<!--        },-->
<!--      ],-->

<!--      fileList: [],-->
<!--      imageUrl: ref(''), // 初始化 imageUrl-->
<!--    };-->
<!--  },-->
<!--  methods: {-->
<!--    showPostForm() {-->
<!--      this.$router.push({ name: 'PostForm' });-->
<!--    },-->
<!--    viewPost(post) {-->
<!--      this.$router.push({ name: 'PostInfo', params: { id: post.id } });-->
<!--    },-->
<!--  },-->
<!--};-->
<!--</script>-->

<!--<style scoped>-->
<!--.community-container {-->
<!--  width: 100%;-->
<!--}-->

<!--.header {-->
<!--  background-color: #fff;-->
<!--  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);-->
<!--  width: 100%;-->
<!--}-->

<!--.right-buttons {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  justify-content: flex-end; /* 将内容靠右对齐 */-->
<!--}-->

<!--.custom-button {-->
<!--  border: none; /* 去除按钮边框 */-->
<!--  padding: 0; /* 去除默认内边距 */-->
<!--  background-color: transparent; /* 去除背景色 */-->
<!--  color: #333333; /* 设置字体颜色为黑色 */-->
<!--  margin-left: 10px; /* 按钮之间的间距 */-->
<!--}-->

<!--.user-profile {-->
<!--  margin-left: 20px;-->
<!--}-->

<!--.username {-->
<!--  font-size: 16px;-->
<!--  color: #333;-->
<!--  margin-left: 10px;-->
<!--}-->

<!--.login-link {-->
<!--  font-size: 16px;-->
<!--  color: #4a688a;-->
<!--  text-decoration: none;-->
<!--}-->

<!--.main-content {-->
<!--  padding: 20px;-->
<!--}-->

<!--.card-content {-->
<!--  padding: 10px;-->
<!--}-->

<!--.post-button-container {-->
<!--  margin-bottom: 20px;-->
<!--}-->
<!--</style>-->
